<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.ok{
				color: green;
			}
			.error{
				color: blue;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript">
			var reg1 = /[a-zA-Z0-9_]{5,10}/;
			var reg2 = /[a-zA-Z0-9_-]+@[a-zA-Z0-9]+(\.[a-zA-Z0-9]+)+/;
			function nameClick(){
				var name = document.getElementById("name").value;
				var num3 = document.getElementById("num3");
				if (name.match(reg1)) {
					num3.className = "ok";
				} else{
					num3.className = "error";
				}
			}
			function mailClick(){
				var mail = document.getElementById("mail").value;
				var num4 = document.getElementById("num4");
				if (mail.match(reg2)) {
					num4.className = "ok";
				} else{
					num4.className = "error";
				}
			}
			
		</script>
		名字：<input type="text" id="name" onblur="nameClick()">
		<span class="ok" id="num3">5-10位字母、数字、下划线</span>
		<br />
		邮箱：<input type="text" id="mail" onblur="mailClick()">
		<span class="ok" id="num4">必须符合邮箱的格式</span>
	</body>
</html>
